<template>
    <div class="common-layout">
      <el-container>
        <el-header style="background-color: #333;">
            <span style="font-size: 20px;color: aliceblue;">公司名称</span>
            <div class="home-header" style="margin-left: 250px;">
                <el-radio-group v-model="navValue" class="nav-radio-group">
                <el-radio-button
                    v-for="item in navList"
                    :key="item.value"
                    :label="item.value"
                    class="nav-radio-btn"
                >
                    <span class="nav-dot"></span>
                    {{ item.label }}
                </el-radio-button>
                </el-radio-group>
            </div>
        </el-header>
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
    </div>
  </template>


  <script setup lang="ts">
  import { ref } from 'vue'

const navList = [
  { label: '集团管理', value: 'group' },
  { label: '企业管理', value: 'company' },
  { label: '平台运营', value: 'platform' },
  { label: '系统设置', value: 'system' }
]
const navValue = ref('company') // 默认选中“企业管理”

</script>


<style>
.nav-radio-group {
  background: transparent;
}
.nav-radio-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 30px;
  padding: 0;
  font-size: 16px;
  color: #fff;
  display: inline-flex;
  align-items: center;
}
.nav-radio-btn .nav-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 6px;
  background: #ccc;
  border: 2px solid #ccc;
  transition: all 0.2s;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner .nav-dot {
  background: #409eff;
  border-color: #409eff;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: #409eff !important;
  color: #fff !important;
  border-radius: 20px !important;
}
.el-radio-button__inner {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 4px 18px !important;
  transition: background 0.2s;
}

</style>